import React, { useState, useEffect,memo } from 'react'
import { Container } from './style'
import { useLocation } from 'react-router-dom'
import {connect} from 'react-redux'
import HeaderExhibition from '../../components/exhibition/headerexhibition/HeaderExhibition'
import BottomExhibition from '../../components/exhibition/bottomexhibition/BottomExhibition'
import ExhibitionSwiper from '../../components/exhibition/exhibitionswiper/ExhibitionSwiper'
import ExhibitionDetails from '../../components/exhibition/exhibitiondetails/ExhibitionDetails'
import Exhibitionimg from '../../components/exhibition/exhibitionimg/ExhibitionImg'
import ExhibitionGuarantee from '../../components/exhibition/exhibitionguarantee/ExhibitionGuarantee'
import Scroll from '../../baseUI/scroll'
import * as api from '../../api/index'

export default function Exhibition() {

  const [goods, setGoods] = useState({});
  const { pathname } = useLocation();
  const id = pathname.replace('/exhibition/', '') || undefined //默认值 

  const fetchfetail = (id) => {
    console.log(id,'-----------');
    api
      .reqexhibition(id)
      .then(res => {
        setGoods(res.data.data)
      })
  }

  useEffect(() => {
    fetchfetail(id)
  },[])
 
  return (
    <Container>
      <HeaderExhibition />
      <div className="keep"></div>
      <div className="scrolldiv">
        <Scroll>
          <div>
            <ExhibitionSwiper goods={goods}/>
            <ExhibitionDetails price={goods}></ExhibitionDetails>
            <Exhibitionimg goods={goods}></Exhibitionimg>
            <ExhibitionGuarantee />
          </div>
        </Scroll>
      </div>
      <div className="keep1"></div>
      <BottomExhibition goods={goods}/>
    </Container>
  )
}

